.chevron {
  display: block;
}

.left .tip {
  transform: rotateZ(180deg) translateX(-100%) translateY(-16px);
}

@media screen and (hover: hover) {
  .line,
  .tip {
    transition-property: transform, opacity;
    transition-duration: 175ms;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  }

  .line {
    opacity: 0;

    .link:hover & {
      opacity: 1;
    }
  }

  .left .tip {
    transform: rotateZ(180deg) translateX(-125%) translateY(-16px);

    .link:hover & {
      transform: rotateZ(180deg) translateX(-100%) translateY(-16px);
    }
  }

  .right .tip {
    transform: translateX(-25%);

    .link:hover & {
      transform: translateX(0);
    }
  }
}
